<template>
  <div>
        <div  :class="'swiper-container  inner-container '+type" >      
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item) in List" :key="item.id" >
                            <div class="preview">
                                <img :src="imgUrl[item.name]" alt="">
                                <div class="info">
                                    <div class="name">{{item.name}}</div>                                
                                    <div class="level">{{item.level}}级 评分{{item.pf}}</div>
                                </div>                               
                            </div>
                            <div class="part part-s clear" >
                                <p>资质</p>
                                <ul class="half-s">
                                    <li class="half-content-s">
                                        <span class="txt">攻击资质：</span>
                                        <i class="progress"><progress-bar :totalScore="parseInt(item.gjzz_max)" :actualScore="parseInt(item.gjzz)"> </progress-bar></i>
                                    </li >
                                    <li class="half-content-s">
                                        <span class="txt">防御资质：</span>
                                        <i class="progress"><progress-bar :totalScore="parseInt(item.fyzz_max)" :actualScore="parseInt(item.fyzz)"> </progress-bar></i>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">体力资质：</span>
                                        <i class="progress"><progress-bar :totalScore="parseInt(item.tlzz_max)" :actualScore="parseInt(item.tlzz)"> </progress-bar></i>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">法力资质：</span>
                                        <i class="progress"><progress-bar :totalScore="parseInt(item.flzz_max)" :actualScore="parseInt(item.flzz)"> </progress-bar></i>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">速度资质：</span>
                                        <i class="progress"><progress-bar :totalScore="parseInt(item.sdzz_max)" :actualScore="parseInt(item.sdzz)"> </progress-bar></i>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">宠物成长：</span>
                                        <span >{{item.cz}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">宠物寿命：</span>
                                        <span >{{item.sm}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="part part-s clear" >
                                <p>技能</p>
                                <ul class="half-r">
                                    <li class="half-content-r" v-for="k in sp(item.jn)" :key="k.id">
                                        <div class="bg"><img :src="imgUrl[k]" alt="">
                                        </div>                                       
                                    </li>                                                               
                                </ul>
                            </div>
                             <div class="part part-s clear" >
                                <p>属性</p>
                                <ul class="half-s">
                                    <li class="half-content-s">
                                        <span class="txt">气血：</span>
                                        <span >{{item.qx}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">体质：</span>
                                        <span >{{item.tz}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">物理伤害：</span>
                                        <span >{{item.wlsh}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">魔力：</span>
                                        <span >{{item.ml}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">物理防御：</span>
                                        <span >{{item.wlfy}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">力量：</span>
                                        <span >{{item.ll}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">法术伤害：</span>
                                        <span >{{item.fssh}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">耐力：</span>
                                        <span >{{item.nl}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">法术防御：</span>
                                        <span >{{item.fsfy}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">敏捷：</span>
                                        <span >{{item.mj}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">速度：</span>
                                        <span >{{item.sd}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">潜力：</span>
                                        <span >{{item.ql}}</span>
                                    </li>
                                </ul>
                            </div>
                                    
                                         <div class="part part-s clear ma-bot" >
                                <p>培养剩余次数</p>
                                <ul class="half-s">
                                    <li class="half-content-s">
                                        <span class="txt">资质丹剩余次数：</span>
                                        <span >{{item.zzdsy}}/15</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">炼兽珍经剩余次数：</span>
                                        <span >{{item.lszjsy}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">如意丹剩余次数：</span>
                                        <span >{{item.rydsy}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">精品元宵剩余次数：</span>
                                        <span >{{item.jpyxsy}}</span>
                                    </li>
                                    <li class="half-content-s">
                                        <span class="txt">生肖元宵剩余次数：</span>
                                        <span >{{item.sxyxsy}}/3</span>
                                    </li>                                                                   
                                </ul>
                            </div>                                                       
                        </div>                            
                    </div>
                    <div class="swiper-pagination">
                    </div>
        </div>
        
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import progressBar from '@/pages/detail/components/parts/beauty/ProgressBar'
import Pictures from "@/pages/common/Pictures";
export default {
     props:{
        List:Array,      
        type:String 
    },
    components:{
    progressBar
  },
  data(){
      return {
          imgUrl:Pictures.imgUrl
      }
  },
  computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            }
    },
     mounted () {
        this.initSwiper();
     },
     methods:{
        initSwiper () {
         var swiper = new Swiper('.'+this.type, {
            observer:true,
            observeParents:true,
            pagination : '.swiper-pagination',
            paginationType : 'custom',
            paginationCustomRender: function (swiper, current, total) {
             return current + ' / ' + total;
            }
          });     
          this.$emit("listenSwiper",swiper);
        }
      }


}
</script>

<style lang="scss" scoped>
.swiper-container{
     width: 100%;
    .swiper-wrapper{
        width: 100%;   
        .swiper-slide{
            width: 100%;
            .preview{
                display: flex;
                width: 100%;
                height: rem(230);
                padding:rem(40) rem(30);
                img{
                    width: rem(150);
                    height: rem(150);
                    background-color: #fff;
                    border-radius: rem(15);
                }
                .info{
                    flex: 1;
                    margin-left: rem(30);
                    .name{
                        margin-top: rem(-10);
                        font-family: 微软雅黑;
                        font-size: rem(48);                           
                        }
                    .level{
                        color: #888;
                        font-size: rem(40);
                    }
                }
            }
            .half-s{
                width: 100%;
                position: relative;
                .half-content-s{
                    display: flex;
                    position: relative;
                    width: 50%;
                    float: left;
                    height: rem(80);
                    line-height: rem(80);
                    font-size: rem(40);
                    .txt{
                        width: auto;
                        color: #888;
                    }
                    .progress{
                        flex: 1;
                        margin-top: rem(20);                                         
                        padding-right: rem(250);
                        font-style: normal;
                                    
                    }

                }                
            }
            .half-r{
                width: 50%;
                position: relative;
                flex-flow: wrap;
                display: flex;
                .half-content-r{                               
                    position: relative;
                    float: left;
                    height: rem(160);
                    line-height: rem(160);
                    font-size: rem(40);
                    margin-right: rem(40);
                    .bg{
                        position: relative;
                        width: rem(120);
                        height: rem(120);
                        background: url(../../../../../assets/imgs/skill-bg-purple.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                        z-index: 1;
                        img{
                        width: rem(100);
                        height: rem(100);
                        margin-top: rem(10);
                        margin-left: rem(10);               
                        }                                  
                                   
                    }
                }
            }
        }
    }
    .swiper-pagination{
        width: auto;
        height: rem(60);
        line-height: rem(60);
        right: rem(30);
        bottom: auto;
        left: auto;
        top: rem(30);
        padding: 0 rem(30);
         color: #fff;
        background: rgba(0,0,0,.5);
        border-radius: rem(30);
        font-size: rem(35);
    }
}
.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);

    p{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);
    }
    p::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
}
.ma-bot{
    margin-bottom: rem(-30);
}
.part-s{
    border-bottom: rem(15) solid #f5f5f5;
}
.outer-container{
 width: rem(200);
 height: rem(200);
 position: relative;
 overflow: hidden;
}
.inner-container{
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
            width: 4px;    
            /*height: 4px;*/
        }
        .inner-container::-webkit-scrollbar-thumb {
            border-radius: 10px;
        
            background: rgba(0,0,0,0.2);
        }
        .inner-container::-webkit-scrollbar-track {
           
            border-radius: 0;
            background: rgba(0,0,0,0.1);

        }
</style>